<!doctype html>
<html class="default no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>canvg</title>
	<meta name="description" content="Documentation for canvg">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
	<div class="tsd-page-toolbar">
		<div class="container">
			<div class="table-wrap">
				<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
					<div class="field">
						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
						<input id="tsd-search-field" type="text" />
					</div>
					<ul class="results">
						<li class="state loading">Preparing search index...</li>
						<li class="state failure">The search index is not available</li>
					</ul>
					<a href="index.html" class="title">canvg</a>
				</div>
				<div class="table-cell" id="tsd-widgets">
					<div id="tsd-filter">
						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
						<div class="tsd-filter-group">
							<div class="tsd-select" id="tsd-filter-visibility">
								<span class="tsd-select-label">All</span>
								<ul class="tsd-select-list">
									<li data-value="public">Public</li>
									<li data-value="protected">Public/Protected</li>
									<li data-value="private" class="selected">All</li>
								</ul>
							</div>
							<input type="checkbox" id="tsd-filter-inherited" checked />
							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
							<input type="checkbox" id="tsd-filter-only-exported" />
							<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
						</div>
					</div>
					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
				</div>
			</div>
		</div>
	</div>
	<div class="tsd-page-title">
		<div class="container">
			<ul class="tsd-breadcrumb">
				<li>
					<a href="globals.html">Globals</a>
				</li>
			</ul>
			<h1>canvg</h1>
		</div>
	</div>
</header>
<div class="container container-main">
	<div class="row">
		<div class="col-8 col-content">
			<div class="tsd-panel tsd-typography">
				<a href="#canvg" id="canvg" style="color: inherit; text-decoration: none;">
					<h1>canvg</h1>
				</a>
				<p><a href="https://npmjs.com/package/canvg"><img src="https://img.shields.io/npm/v/canvg.svg" alt="NPM version"></a>
					<a href="https://david-dm.org/canvg/canvg"><img src="https://david-dm.org/canvg/canvg.svg" alt="Dependencies status"></a>
					<a href="https://travis-ci.com/canvg/canvg"><img src="http://img.shields.io/travis/com/canvg/canvg/master.svg" alt="Build status"></a>
					<a href="https://coveralls.io/r/canvg/canvg"><img src="https://img.shields.io/coveralls/canvg/canvg.svg" alt="Coverage status"></a>
					<a href="https://dependabot.com/"><img src="https://api.dependabot.com/badges/status?host=github&repo=canvg/canvg" alt="Dependabot badge"></a>
				<a href="https://canvg.github.io/canvg"><img src="https://img.shields.io/badge/API-Documentation-2b7489.svg" alt="Documentation badge"></a></p>
				<p>JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders the result on Canvas.</p>
				<p><a href="https://canvg.github.io/canvg/demo/index.html">Demo</a></p>
				<p><a href="https://jsfiddle.net/0q1vrjxk/">Playground</a></p>
				<a href="#install" id="install" style="color: inherit; text-decoration: none;">
					<h2>Install</h2>
				</a>
				<pre><code class="language-sh">npm i canvg
<span class="hljs-comment"># or</span>
yarn add canvg</code></pre>
				<a href="#usage" id="usage" style="color: inherit; text-decoration: none;">
					<h2>Usage</h2>
				</a>
				<p>Basic module exports:</p>
				<pre><code class="language-js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Canvg;
<span class="hljs-keyword">export</span> {
    presets
};</code></pre>
				<p><a href="https://canvg.github.io/canvg/index.html">Description of all exports you can find in Documentation.</a></p>
				<a href="#example" id="example" style="color: inherit; text-decoration: none;">
					<h3>Example</h3>
				</a>
				<pre><code class="language-js"><span class="hljs-keyword">import</span> Canvg <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;canvg&#x27;</span>;

<span class="hljs-keyword">let</span> v = <span class="hljs-literal">null</span>;

<span class="hljs-built_in">window</span>.onload = <span class="hljs-keyword">async</span> () =&gt; {

    <span class="hljs-keyword">const</span> canvas = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&#x27;canvas&#x27;</span>);
    <span class="hljs-keyword">const</span> ctx = canvas.getContext(<span class="hljs-string">&#x27;2d&#x27;</span>);

    v = <span class="hljs-keyword">await</span> Canvg.from(ctx, <span class="hljs-string">&#x27;./svgs/1.svg&#x27;</span>);

    <span class="hljs-comment">// Start SVG rendering with animations and mouse handling.</span>
    v.start();
};

<span class="hljs-built_in">window</span>.onbeforeunload = <span class="hljs-function">() =&gt;</span> {
    v.stop();
};</code></pre>
				<details>
					<summary>
						<b>OffscreenCanvas</b>
					</summary>
					<pre><code class="language-js"><span class="hljs-keyword">import</span> Canvg, {
    presets
} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;canvg&#x27;</span>;

self.onmessage = <span class="hljs-keyword">async</span> (event) =&gt; {

    <span class="hljs-keyword">const</span> {
        width,
        height,
        svg
    } = event.data;
    <span class="hljs-keyword">const</span> canvas = <span class="hljs-keyword">new</span> OffscreenCanvas(width, height);
    <span class="hljs-keyword">const</span> ctx = canvas.getContext(<span class="hljs-string">&#x27;2d&#x27;</span>);
    <span class="hljs-keyword">const</span> v = <span class="hljs-keyword">await</span> Canvg.from(ctx, svg, presets.offscreen());

    <span class="hljs-comment">// Render only first frame, ignoring animations and mouse.</span>
    <span class="hljs-keyword">await</span> v.render();

    <span class="hljs-keyword">const</span> blob = <span class="hljs-keyword">await</span> canvas.convertToBlob();
    <span class="hljs-keyword">const</span> pngUrl = URL.createObjectURL(blob);

    self.postMessage({
        pngUrl
    });
};</code></pre>
					<p><a href="https://caniuse.com/offscreencanvas"><code>OffscreenCanvas</code> browsers compatibility.</a></p>
				</details>
				<details>
					<summary>
						<b>NodeJS</b>
					</summary>
					<pre><code class="language-js"><span class="hljs-keyword">import</span> {
    promises <span class="hljs-keyword">as</span> fs
} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;fs&#x27;</span>;
<span class="hljs-keyword">import</span> {
    DOMParser
} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;xmldom&#x27;</span>;
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> canvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;canvas&#x27;</span>;
<span class="hljs-keyword">import</span> fetch <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;node-fetch&#x27;</span>;
<span class="hljs-keyword">import</span> Canvg, {
    presets
} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;canvg&#x27;</span>;

<span class="hljs-keyword">const</span> preset = presets.node({
    DOMParser,
    canvas,
    fetch
});

(<span class="hljs-keyword">async</span> (output, input) =&gt; {

    <span class="hljs-keyword">const</span> svg = <span class="hljs-keyword">await</span> fs.readFile(input, <span class="hljs-string">&#x27;utf8&#x27;</span>);
    <span class="hljs-keyword">const</span> canvas = preset.createCanvas(<span class="hljs-number">800</span>, <span class="hljs-number">600</span>);
    <span class="hljs-keyword">const</span> ctx = canvas.getContext(<span class="hljs-string">&#x27;2d&#x27;</span>);
    <span class="hljs-keyword">const</span> v = Canvg.fromString(ctx, svg, preset);

    <span class="hljs-comment">// Render only first frame, ignoring animations.</span>
    <span class="hljs-keyword">await</span> v.render();

    <span class="hljs-keyword">const</span> png = canvas.toBuffer();

    <span class="hljs-keyword">await</span> fs.writeFile(output, png);

})(
    process.argv.pop(),
    process.argv.pop()
);</code></pre>
				</details>
				<details>
					<summary>
						<b>Resize</b>
					</summary>
					<pre><code class="language-js"><span class="hljs-keyword">import</span> Canvg, {
    presets
} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;canvg&#x27;</span>;

self.onmessage = <span class="hljs-keyword">async</span> (event) =&gt; {

    <span class="hljs-keyword">const</span> {
        width,
        height,
        svg
    } = event.data;
    <span class="hljs-keyword">const</span> canvas = <span class="hljs-keyword">new</span> OffscreenCanvas(width, height);
    <span class="hljs-keyword">const</span> ctx = canvas.getContext(<span class="hljs-string">&#x27;2d&#x27;</span>);
    <span class="hljs-keyword">const</span> v = <span class="hljs-keyword">await</span> Canvg.from(ctx, svg, presets.offscreen());

    <span class="hljs-comment">/**
     * Resize SVG to fit in given size.
     * @param width
     * @param height
     * @param preserveAspectRatio
     */</span>
    v.resize(width, height, <span class="hljs-string">&#x27;xMidYMid meet&#x27;</span>);

    <span class="hljs-comment">// Render only first frame, ignoring animations and mouse.</span>
    <span class="hljs-keyword">await</span> v.render();

    <span class="hljs-keyword">const</span> blob = <span class="hljs-keyword">await</span> canvas.convertToBlob();
    <span class="hljs-keyword">const</span> pngUrl = URL.createObjectURL(blob);

    self.postMessage({
        pngUrl
    });
};</code></pre>
				</details>
				<details>
					<summary>
						<b>Browser</b>
					</summary>
					<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/canvg@3.0.4/lib/umd.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript">
<span class="hljs-built_in">window</span>.onload = <span class="hljs-function">() =&gt;</span> {

    <span class="hljs-keyword">const</span> canvas = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&#x27;canvas&#x27;</span>);
    <span class="hljs-keyword">const</span> ctx = canvas.getContext(<span class="hljs-string">&#x27;2d&#x27;</span>);

    v = canvg.Canvg.fromString(ctx, <span class="hljs-string">&#x27;&lt;svg width=&quot;600&quot; height=&quot;600&quot;&gt;&lt;text x=&quot;50&quot; y=&quot;50&quot;&gt;Hello World!&lt;/text&gt;&lt;/svg&gt;&#x27;</span>);

    <span class="hljs-comment">// Start SVG rendering with animations and mouse handling.</span>
    v.start();

};
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> /&gt;</span></code></pre>
				</details>
				<a href="#options" id="options" style="color: inherit; text-decoration: none;">
					<h3>Options</h3>
				</a>
				<p>The third parameter of <code>new Canvg(...)</code>, <code>Canvg.from(...)</code> and <code>Canvg.fromString(...)</code> is options:</p>
				<pre><code class="language-ts"><span class="hljs-keyword">interface</span> IOptions {
    <span class="hljs-comment">/**
     * WHATWG-compatible `fetch` function.
     */</span>
    fetch?: <span class="hljs-keyword">typeof</span> fetch;
    <span class="hljs-comment">/**
     * XML/HTML parser from string into DOM Document.
     */</span>
    DOMParser?: <span class="hljs-keyword">typeof</span> DOMParser;
    <span class="hljs-comment">/**
     * Window object.
     */</span>
    <span class="hljs-built_in">window</span>?: Window;
    <span class="hljs-comment">/**
     * Whether enable the redraw.
     */</span>
    enableRedraw?: <span class="hljs-built_in">boolean</span>;
    <span class="hljs-comment">/**
     * Ignore mouse events.
     */</span>
    ignoreMouse?: <span class="hljs-built_in">boolean</span>;
    <span class="hljs-comment">/**
     * Ignore animations.
     */</span>
    ignoreAnimation?: <span class="hljs-built_in">boolean</span>;
    <span class="hljs-comment">/**
     * Does not try to resize canvas.
     */</span>
    ignoreDimensions?: <span class="hljs-built_in">boolean</span>;
    <span class="hljs-comment">/**
     * Does not clear canvas.
     */</span>
    ignoreClear?: <span class="hljs-built_in">boolean</span>;
    <span class="hljs-comment">/**
     * Scales horizontally to width.
     */</span>
    scaleWidth?: <span class="hljs-built_in">number</span>;
    <span class="hljs-comment">/**
     * Scales vertically to height.
     */</span>
    scaleHeight?: <span class="hljs-built_in">number</span>;
    <span class="hljs-comment">/**
     * Draws at a x offset.
     */</span>
    offsetX?: <span class="hljs-built_in">number</span>;
    <span class="hljs-comment">/**
     * Draws at a y offset.
     */</span>
    offsetY?: <span class="hljs-built_in">number</span>;
    <span class="hljs-comment">/**
     * Will call the function on every frame, if it returns true, will redraw.
     */</span>
    forceRedraw?(): <span class="hljs-built_in">boolean</span>;
    <span class="hljs-comment">/**
     * Default `rem` size.
     */</span>
    rootEmSize?: <span class="hljs-built_in">number</span>;
    <span class="hljs-comment">/**
     * Default `em` size.
     */</span>
    emSize?: <span class="hljs-built_in">number</span>;
    <span class="hljs-comment">/**
     * Function to create new canvas.
     */</span>
    createCanvas?: <span class="hljs-function">(<span class="hljs-params">width: <span class="hljs-built_in">number</span>, height: <span class="hljs-built_in">number</span></span>) =&gt;</span> HTMLCanvasElement | OffscreenCanvas;
    <span class="hljs-comment">/**
     * Function to create new image.
     */</span>
    createImage?: <span class="hljs-function">(<span class="hljs-params">src: <span class="hljs-built_in">string</span>, anonymousCrossOrigin?: <span class="hljs-built_in">boolean</span></span>) =&gt;</span> <span class="hljs-built_in">Promise</span>&lt;CanvasImageSource&gt;;
    <span class="hljs-comment">/**
     * Load images anonymously.
     */</span>
    anonymousCrossOrigin?: <span class="hljs-built_in">boolean</span>;
}</code></pre>
				<a href="#options-presets" id="options-presets" style="color: inherit; text-decoration: none;">
					<h4>Options presets</h4>
				</a>
				<p>There are two options presets:</p>
				<ul>
					<li><code>presets.offscreen()</code>: options for <a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas"><code>OffscreenCanvas</code></a>;</li>
					<li><code>presets.node({ DOMParser, canvas, fetch })</code>: options for NodeJS with <a href="https://github.com/Automattic/node-canvas"><code>node-canvas</code></a>.</li>
				</ul>
				<a href="#what39s-implemented" id="what39s-implemented" style="color: inherit; text-decoration: none;">
					<h2>What&#39;s implemented?</h2>
				</a>
				<p>The end goal is everything from the <a href="http://www.w3.org/TR/SVG/">SVG spec</a>. The majority of the rendering and animation is working. If you would like to see a feature implemented, don&#39;t hesitate to add it to the issues list, or better is to create pull request 😎</p>
			</div>
		</div>
		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
			<nav class="tsd-navigation primary">
				<ul>
					<li class="globals  ">
						<a href="globals.html"><em>Globals</em></a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_boundingbox_.html">&quot;src/<wbr>Bounding<wbr>Box&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_canvg_.html">&quot;src/<wbr>Canvg&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_aelement_.html">&quot;src/<wbr>Document/AElement&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_animatecolorelement_.html">&quot;src/<wbr>Document/<wbr>Animate<wbr>Color<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_animateelement_.html">&quot;src/<wbr>Document/<wbr>Animate<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_animatetransformelement_.html">&quot;src/<wbr>Document/<wbr>Animate<wbr>Transform<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_circleelement_.html">&quot;src/<wbr>Document/<wbr>Circle<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_clippathelement_.html">&quot;src/<wbr>Document/<wbr>Clip<wbr>Path<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_defselement_.html">&quot;src/<wbr>Document/<wbr>Defs<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_descelement_.html">&quot;src/<wbr>Document/<wbr>Desc<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_document_.html">&quot;src/<wbr>Document/<wbr>Document&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_element_.html">&quot;src/<wbr>Document/<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_ellipseelement_.html">&quot;src/<wbr>Document/<wbr>Ellipse<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_fecolormatrixelement_.html">&quot;src/<wbr>Document/<wbr>FeColor<wbr>Matrix<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_fecompositeelement_.html">&quot;src/<wbr>Document/<wbr>FeComposite<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_fedropshadowelement_.html">&quot;src/<wbr>Document/<wbr>FeDrop<wbr>Shadow<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_fegaussianblurelement_.html">&quot;src/<wbr>Document/<wbr>FeGaussian<wbr>Blur<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_femorphologyelement_.html">&quot;src/<wbr>Document/<wbr>FeMorphology<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_filterelement_.html">&quot;src/<wbr>Document/<wbr>Filter<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_fontelement_.html">&quot;src/<wbr>Document/<wbr>Font<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_fontfaceelement_.html">&quot;src/<wbr>Document/<wbr>Font<wbr>Face<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_gelement_.html">&quot;src/<wbr>Document/GElement&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_glyphelement_.html">&quot;src/<wbr>Document/<wbr>Glyph<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_gradientelement_.html">&quot;src/<wbr>Document/<wbr>Gradient<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_imageelement_.html">&quot;src/<wbr>Document/<wbr>Image<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_lineelement_.html">&quot;src/<wbr>Document/<wbr>Line<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_lineargradientelement_.html">&quot;src/<wbr>Document/<wbr>Linear<wbr>Gradient<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_markerelement_.html">&quot;src/<wbr>Document/<wbr>Marker<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_maskelement_.html">&quot;src/<wbr>Document/<wbr>Mask<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_missingglyphelement_.html">&quot;src/<wbr>Document/<wbr>Missing<wbr>Glyph<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_pathelement_.html">&quot;src/<wbr>Document/<wbr>Path<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_patternelement_.html">&quot;src/<wbr>Document/<wbr>Pattern<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_polygonelement_.html">&quot;src/<wbr>Document/<wbr>Polygon<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_polylineelement_.html">&quot;src/<wbr>Document/<wbr>Polyline<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_radialgradientelement_.html">&quot;src/<wbr>Document/<wbr>Radial<wbr>Gradient<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_rectelement_.html">&quot;src/<wbr>Document/<wbr>Rect<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_renderedelement_.html">&quot;src/<wbr>Document/<wbr>Rendered<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_svgelement_.html">&quot;src/<wbr>Document/SVGElement&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_stopelement_.html">&quot;src/<wbr>Document/<wbr>Stop<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_styleelement_.html">&quot;src/<wbr>Document/<wbr>Style<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_symbolelement_.html">&quot;src/<wbr>Document/<wbr>Symbol<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_trefelement_.html">&quot;src/<wbr>Document/TRef<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_tspanelement_.html">&quot;src/<wbr>Document/TSpan<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_textelement_.html">&quot;src/<wbr>Document/<wbr>Text<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_textnode_.html">&quot;src/<wbr>Document/<wbr>Text<wbr>Node&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_textpathelement_.html">&quot;src/<wbr>Document/<wbr>Text<wbr>Path<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_titleelement_.html">&quot;src/<wbr>Document/<wbr>Title<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_unknownelement_.html">&quot;src/<wbr>Document/<wbr>Unknown<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_useelement_.html">&quot;src/<wbr>Document/<wbr>Use<wbr>Element&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_elements_.html">&quot;src/<wbr>Document/elements&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_document_index_.html">&quot;src/<wbr>Document/index&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_font_.html">&quot;src/<wbr>Font&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_mouse_.html">&quot;src/<wbr>Mouse&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_parser_.html">&quot;src/<wbr>Parser&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_pathparser_.html">&quot;src/<wbr>Path<wbr>Parser&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_point_.html">&quot;src/<wbr>Point&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_property_.html">&quot;src/<wbr>Property&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_svgfontloader_.html">&quot;src/SVGFont<wbr>Loader&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_screen_.html">&quot;src/<wbr>Screen&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_transform_matrix_.html">&quot;src/<wbr>Transform/<wbr>Matrix&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_transform_rotate_.html">&quot;src/<wbr>Transform/<wbr>Rotate&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_transform_scale_.html">&quot;src/<wbr>Transform/<wbr>Scale&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_transform_skew_.html">&quot;src/<wbr>Transform/<wbr>Skew&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_transform_skewx_.html">&quot;src/<wbr>Transform/<wbr>Skew<wbr>X&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_transform_skewy_.html">&quot;src/<wbr>Transform/<wbr>Skew<wbr>Y&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_transform_transform_.html">&quot;src/<wbr>Transform/<wbr>Transform&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_transform_translate_.html">&quot;src/<wbr>Transform/<wbr>Translate&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_transform_index_.html">&quot;src/<wbr>Transform/index&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_transform_types_.html">&quot;src/<wbr>Transform/types&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_viewport_.html">&quot;src/<wbr>View<wbr>Port&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_index_.html">&quot;src/index&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_presets_index_.html">&quot;src/presets/index&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_presets_node_.html">&quot;src/presets/node&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_presets_offscreen_.html">&quot;src/presets/offscreen&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_presets_types_.html">&quot;src/presets/types&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_types_.html">&quot;src/types&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_util_debug_.html">&quot;src/util/debug&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_util_index_.html">&quot;src/util/index&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_util_math_.html">&quot;src/util/math&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_util_string_.html">&quot;src/util/string&quot;</a>
					</li>
					<li class=" tsd-kind-module">
						<a href="modules/_src_util_styles_.html">&quot;src/util/styles&quot;</a>
					</li>
				</ul>
			</nav>
			<nav class="tsd-navigation secondary menu-sticky">
				<ul class="before-current">
				</ul>
			</nav>
		</div>
	</div>
</div>
<footer class="with-border-bottom">
	<div class="container">
		<h2>Legend</h2>
		<div class="tsd-legend-group">
			<ul class="tsd-legend">
				<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
				<li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
			</ul>
		</div>
	</div>
</footer>
<div class="container tsd-generator">
	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
</body>
</html>